---
import type { Project } from '@/types'

const { title, url, imageUrl, source, tags } = Astro.props as Project

const { hostname } = new URL(url)
---

<column class="project" box-="square" shear-="both">
    <column class="preview" style={{ backgroundImage: `url(${imageUrl})` }}
    ></column>
    <column class="info">
        <a href={url} target="_blank" class="title-link"
            ><strong>{title}</strong></a
        >
        <ul marker-="open tree">
            <li>
                <a href={url} target="_blank">&#xeb01; {hostname} &#xf08e;</a>
            </li>
            {
                source && (
                    <li>
                        <a href={source} target="_blank">
                            &#xe709; Source &#xf08e;
                        </a>
                    </li>
                )
            }
            {
                tags && (
                    <li class="badge-list">
                        <row gap-="1" pad-="1 0">
                            {tags.map((tag) => (
                                <span
                                    is-="badge"
                                    variant-="background2"
                                    cap-="round">
                                    {tag}
                                </span>
                            ))}
                        </row>
                    </li>
                )
            }
        </ul>
    </column>
</column>

<style>
    .project {
        flex: 1 1 0;
        min-width: 36ch;
    }
    .preview {
        width: 100%;
        flex-grow: 1;
        aspect-ratio: 3 / 2;
        background-size: cover;
        background-position: center;
    }
    .title-link {
        color: var(--foreground0);
        text-decoration: none;
    }
    .info {
        background-color: var(--background1);
        padding: 1lh 2ch;
    }
    .badge-list {
        display: flex;
    }
    ul li::before {
        color: var(--foreground2);
    }
</style>
